<template>
  <div class="asset-paths-container">
    <div class="header">
      <div class="header-left" @click="action.back">
        <ChevronLeftIcon class="icon" /> 返回
      </div>
      <div class="header-center">
        <div class="title">资源路径管理</div>
      </div>
      <div class="header-right">
        <t-button @click="action.openAddDialog" theme="primary">
          <template #icon>
            <AddIcon />
          </template>
          添加路径
        </t-button>
      </div>
    </div>

    <div class="content">
      <div class="description">
        <t-alert theme="info" title="关于资源路径">
          <template #message>
            <p>在此页面管理系统资源路径配置。这些路径用于访问图像、视频和语音相关资源。您可以将路径配置为本地文件路径或HTTP URL地址。</p>
          </template>
        </t-alert>
      </div>

      <div class="asset-paths-list">
        <t-table
          :data="assetPaths"
          :columns="columns"
          row-key="id"
          hover
          stripe
          :loading="tableLoading"
          empty="暂无资源路径配置"
        >
          <template #path_key="{ row }">
            <div class="path-key">{{ row.path_key }}</div>
            <div class="path-description">{{ row.description || '无描述' }}</div>
          </template>

          <template #path_value="{ row }">
            <div class="path-value">
              <span>{{ row.path_value }}</span>
            </div>
          </template>

          <template #enabled="{ row }">
            <t-tag v-if="row.enabled" theme="success">已启用</t-tag>
            <t-tag v-else theme="warning">已禁用</t-tag>
          </template>

          <template #created_at="{ row }">
            <p style="color: #000000">{{ formatDate(row.created_at) }}</p>
          </template>

          <template #operation="{ row }">
            <t-space>
              <t-button
                variant="text"
                theme="primary"
                size="small"
                @click="action.toggleStatus(row)"
              >
                {{ row.enabled ? '禁用' : '启用' }}
              </t-button>
              <t-button
                variant="text"
                theme="primary"
                size="small"
                @click="action.openEditDialog(row)"
              >
                编辑
              </t-button>
              <t-button
                variant="text"
                theme="danger"
                size="small"
                @click="action.confirmDelete(row)"
              >
                删除
              </t-button>
            </t-space>
          </template>
        </t-table>
      </div>
    </div>

    <!-- 添加/编辑资源路径对话框 -->
    <t-dialog
      v-model:visible="dialogVisible"
      :header="isEditing ? '编辑资源路径' : '添加资源路径'"
      :footer="false"
      width="500px"
    >
      <t-form
        ref="form"
        :data="formData"
        :rules="rules"
        @submit="action.submitForm"
      >
        <t-form-item label="路径键名" name="pathKey">
          <t-input v-model="formData.pathKey" placeholder="请输入路径键名" />
        </t-form-item>

        <t-form-item label="路径值" name="pathValue">
          <t-input v-model="formData.pathValue" placeholder="请输入路径值，可以是HTTP URL或本地路径" />
        </t-form-item>

        <t-form-item label="描述" name="description">
          <t-textarea
            v-model="formData.description"
            placeholder="请输入路径描述（可选）"
            :autosize="{ minRows: 2, maxRows: 4 }"
          />
        </t-form-item>

        <t-form-item label="是否启用" name="enabled">
          <t-switch v-model="formData.enabled" />
        </t-form-item>

        <div class="form-footer">
          <t-space>
            <t-button theme="default" @click="dialogVisible = false">取消</t-button>
            <t-button theme="primary" type="submit" :loading="submitLoading">确认</t-button>
          </t-space>
        </div>
      </t-form>
    </t-dialog>

    <!-- 确认删除对话框 -->
    <t-dialog
      v-model:visible="confirmDialogVisible"
      header="确认删除"
      :confirm-btn="{ content: '删除', theme: 'danger' }"
      :cancel-btn="{ content: '取消' }"
      @confirm="action.deleteAssetPath"
    >
      <p>确定要删除路径 "{{ currentPath?.path_key }}" 吗？此操作不可恢复。</p>
    </t-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import {
  ChevronLeftIcon,
  AddIcon
} from 'tdesign-icons-vue-next';
import { useRouter } from 'vue-router';
import { MessagePlugin } from 'tdesign-vue-next';
import {
  getAllAssetPaths,
  addAssetPath,
  updateAssetPath,
  deleteAssetPath,
  toggleAssetPathStatus,
} from '@renderer/api/assetPaths';

const router = useRouter();
const tableLoading = ref(false);
const dialogVisible = ref(false);
const confirmDialogVisible = ref(false);
const submitLoading = ref(false);
const isEditing = ref(false);
const currentPath = ref(null);
const assetPaths = ref([]);

// 表格列定义
const columns = [
  { colKey: 'path_key', title: '路径键名', width: '150', cell: { col: 'path_key' } },
  { colKey: 'path_value', title: '路径值', width: '350', cell: { col: 'path_value' } },
  { colKey: 'enabled', title: '状态', width: '100', cell: { col: 'enabled' } },
  { colKey: 'created_at', title: '创建时间', width: '150', cell: { col: 'created_at' } },
  { colKey: 'operation', title: '操作', fixed: 'right', width: '180', cell: { col: 'operation' } },
];

// 表单数据
const formData = reactive({
  pathKey: '',
  pathValue: '',
  description: '',
  enabled: true
});

// 表单验证规则
const rules = {
  pathKey: [{ required: true, message: '请输入路径键名', trigger: 'blur' }],
  pathValue: [{ required: true, message: '请输入路径值', trigger: 'blur' }]
};

// 格式化日期
const formatDate = (timestamp) => {
  if (!timestamp) return '未知';
  const date = new Date(timestamp);
  return date.toLocaleString();
};

// 加载资源路径列表
const loadAssetPaths = async () => {
  tableLoading.value = true;
  try {
    const result = await getAllAssetPaths();
    assetPaths.value = result;
  } catch (error) {
    console.error('加载资源路径失败:', error);
    MessagePlugin.error('加载资源路径失败: ' + (error.message || '未知错误'));
  } finally {
    tableLoading.value = false;
  }
};

// 重置表单
const resetForm = () => {
  formData.pathKey = '';
  formData.pathValue = '';
  formData.description = '';
  formData.enabled = true;
};

const action = {
  // 返回上一页
  back() {
    router.push("/home");
  },

  // 打开添加对话框
  openAddDialog() {
    isEditing.value = false;
    resetForm();
    dialogVisible.value = true;
  },

  // 打开编辑对话框
  openEditDialog(row) {
    isEditing.value = true;
    formData.pathKey = row.path_key;
    formData.pathValue = row.path_value;
    formData.description = row.description || '';
    formData.enabled = !!row.enabled;
    currentPath.value = row;
    dialogVisible.value = true;
  },

// 提交表单处理
  async submitForm({ validateResult }) {
    if (validateResult === true) {
      submitLoading.value = true;
      try {
        if (isEditing.value) {
          // 编辑现有路径
          await updateAssetPath(currentPath.value.id, {
            pathKey: formData.pathKey,
            pathValue: formData.pathValue,
            description: formData.description,
            enabled: formData.enabled ? 1 : 0
          });
          MessagePlugin.success('资源路径更新成功');
        } else {
          // 添加新路径
          await addAssetPath(
            formData.pathKey,
            formData.pathValue,
            formData.description,
            formData.enabled ? 1 : 0
          );
          MessagePlugin.success('资源路径添加成功');
        }
        dialogVisible.value = false;
        await loadAssetPaths();

      } catch (error) {
        console.error('保存资源路径失败:', error);
        MessagePlugin.error('保存资源路径失败: ' + (error.message || '未知错误'));
      } finally {
        submitLoading.value = false;
      }
    }
  },

  // 确认删除对话框
  confirmDelete(row) {
    currentPath.value = row;
    confirmDialogVisible.value = true;
  },

  // 删除资源路径
  async deleteAssetPath() {
    if (!currentPath.value) return;

    try {
      await deleteAssetPath(currentPath.value.id);
      MessagePlugin.success('资源路径删除成功');
      await loadAssetPaths();

      console.log('资源路径配置已更新');
    } catch (error) {
      console.error('删除资源路径失败:', error);
      MessagePlugin.error('删除资源路径失败: ' + (error.message || '未知错误'));
    }
  },

  // 切换路径启用状态
  async toggleStatus(row) {
    try {
      await toggleAssetPathStatus(row.id, !row.enabled);
      MessagePlugin.success(`${row.path_key} ${row.enabled ? '已禁用' : '已启用'}`);
      await loadAssetPaths();

    } catch (error) {
      console.error('更改资源路径状态失败:', error);
      MessagePlugin.error('更改资源路径状态失败: ' + (error.message || '未知错误'));
    }
  },
};

onMounted(() => {
  loadAssetPaths();
});
</script>

<style lang="less" scoped>
.asset-paths-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #ffffff;  // 深色背景改为白色
  color: #333333;  // 白色文字改为深灰色

  .header {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 20px 0 23px;
    -webkit-app-region: drag;
    -webkit-user-select: none;
    background-color: #ffffff;  // 深色背景改为白色
    border-bottom: 1px solid #e0e0e0;  // 黑色边框改为浅灰色

    &-left {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #333333;  // 白色文字改为深灰色
      gap: 6px;
      cursor: pointer;
      padding-right: 20px;
      border-right: 1px solid rgba(0, 0, 0, 0.15);  // 半透明白色边框改为半透明黑色
      -webkit-app-region: no-drag;

      .icon {
        font-size: 20px;
      }
    }

    &-center {
      flex: 1;
      text-align: center;

      .title {
        font-weight: 600;
        font-size: 16px;
        color: #333333;  // 白色文字改为深灰色
      }
    }

    &-right {
      display: flex;
      align-items: center;
      gap: 16px;
      -webkit-app-region: no-drag;
    }
  }

  .content {
    flex: 1;
    padding: 20px;
    overflow: auto;

    .description {
      margin-bottom: 20px;

      :deep(.t-alert) {
        background-color: rgba(255, 119, 11, 0.1);  // 保留原有的警告色背景
        border-color: rgba(255, 119, 11, 0.3);  // 保留原有的警告色边框
      }

      :deep(.t-alert__title) {
        color: #333333;  // 白色文字改为深灰色
      }

      :deep(.t-alert__message) {
        color: rgba(0, 0, 0, 0.8);  // 半透明白色改为半透明黑色
      }
    }

    .asset-paths-list {
      :deep(.t-table) {
        background-color: #ffffff;  // 深色背景改为白色
        border-color: #e0e0e0;  // 深色边框改为浅灰色
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);  // 添加轻微阴影增强立体感
        border-radius: 4px;  // 添加圆角

        .t-table__header {
          background-color: #f5f5f5;  // 深色表头背景改为浅灰色
          color: #333333;  // 白色文字改为深灰色

          th {
            border-color: #e0e0e0;  // 深色边框改为浅灰色
            font-weight: 600;  // 加粗表头文字
          }
        }

        .t-table__body {
          color: #333333;  // 白色文字改为深灰色

          td {
            border-color: #e0e0e0;  // 深色边框改为浅灰色
          }

          .t-table-row:hover {
            background-color: #f9f9f9;  // 鼠标悬停背景改为更浅的灰色
          }
        }

        .t-table__empty {
          color: rgba(0, 0, 0, 0.5);  // 半透明白色改为半透明黑色
        }
      }

      .path-key {
        font-weight: 500;
        font-size: 14px;
        color: #333333;  // 黑色改为深灰色，原代码中这里似乎有误，应为白色
      }

      .path-description {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.7);  // 黑色改为半透明黑色，原代码中这里似乎有误，应为半透明白色
        margin-top: 4px;
      }

      .path-value {
        font-family: monospace;
        color: #0052d9;  // 黑色改为品牌蓝色，使代码路径更明显，原代码中这里似乎有误，应为白色
        word-break: break-all;
        background-color: rgba(0, 0, 0, 0.03);  // 添加轻微背景色，增强代码区分度
        padding: 2px 6px;
        border-radius: 3px;
      }
    }
  }
}

// 对话框样式
:deep(.t-dialog) {
  background-color: #ffffff;  // 深色背景改为白色

  .t-dialog__header {
    color: #333333;  // 白色文字改为深灰色
    border-bottom: 1px solid #e0e0e0;  // 添加边框分隔线
    padding-bottom: 16px;  // 增加一些内边距
  }

  .t-dialog__body {
    color: #333333;  // 白色文字改为深灰色
  }

  .t-form__label {
    color: #333333;  // 白色文字改为深灰色
  }

  .t-input, .t-textarea {
    --td-bg-color-specialcomponent: #ffffff;  // 深色输入框背景改为白色
    --td-text-color-primary: #333333;  // 白色文字改为深灰色
    --td-text-color-placeholder: rgba(0, 0, 0, 0.4);  // 半透明白色改为半透明黑色

    input, textarea {
      background-color: #ffffff;  // 深色输入框背景改为白色
      border-color: #e0e0e0;  // 深色边框改为浅灰色
      color: #333333;  // 白色文字改为深灰色

      &:hover, &:focus {
        border-color: #0052d9;  // 悬停和聚焦时使用品牌蓝色
      }
    }

    &:focus-within {
      box-shadow: 0 0 0 2px rgba(0, 82, 217, 0.1);  // 添加聚焦时的轻微蓝色阴影
    }
  }
}

.form-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;  // 添加顶部边框
}
</style>
